import React, { useState } from 'react';
import { AudioButton } from './AudioButton';
import { BookmarkButton } from './BookmarkButton';
import { playTextToSpeech, getSpeed, setSpeed } from '../utils/textToSpeech';

interface ParagraphProps {
  english: string;
  chinese: string;
  index: number;
  isBookmarked: boolean;
  onToggleBookmark: (index: number) => void;
}

export const Paragraph = React.memo<ParagraphProps>(({ 
  english, 
  chinese, 
  index,
  isBookmarked,
  onToggleBookmark
}) => {
  const [showTranslation, setShowTranslation] = useState(false);

  return (
    <div id={`bookmark-${index}`} className="mb-8 px-6">
      <div className="mb-2">
        <div className="flex items-center space-x-2 mb-2">
          <AudioButton
            accent="US"
            text={english}
            onClick={() => playTextToSpeech(english, 'US')}
          />
          <AudioButton
            accent="UK"
            text={english}
            onClick={() => playTextToSpeech(english, 'UK')}
          />
          <BookmarkButton
            paragraphIndex={index}
            isBookmarked={isBookmarked}
            onToggle={onToggleBookmark}
          />
        </div>
        <p className="text-lg text-gray-800 leading-relaxed">{english}</p>
      </div>
      <div>
        <button
          onClick={() => setShowTranslation(!showTranslation)}
          className="text-sm text-blue-600 hover:text-blue-800 focus:outline-none"
        >
          {showTranslation ? '隐藏翻译' : '点击查看翻译'}
        </button>
        {showTranslation && (
          <p className="text-gray-600 leading-relaxed mt-2">{chinese}</p>
        )}
      </div>
    </div>
  );
});